<template>
	<view>
		<MyNavbar title="我的" :autoBack="false"/>
		
		<!-- 用户信息区域 -->
		<div 
			class="flex flex-center"
			style="min-height: 200rpx;background-color: #007AFF;padding: 24rpx;color: #FFFFFF;"
		>
			<!-- 已登录 -->
			<div v-if="userInfo" class="flex flex-center">
				<u-avatar :src="userInfo.avatar"/>
				<text style="margin-left: 12rpx;">{{userInfo.nickname}}</text>
			</div>
			
			<!-- 未登录 -->
			<div v-else class="flex flex-center" @click="toLogin()">
				<u-avatar icon="account-fill" src=""/>
				<text style="margin-left: 12rpx;">立即登录</text>
			</div>
		</div>
		
		
		<!-- 简单报表 -->
		<div style="background-color: #FFFFFF;margin: 24rpx;">
			<u-cell title="营业统计"  is-link></u-cell>
			<u-grid
				style="padding: 12rpx 0;"
				:border="false"
				col="2"
			>
				<u-grid-item  class="grid-item">
					<div style="color: red;">
						￥<u-count-to color="red" bold :startVal="0" :endVal="544"></u-count-to>
					</div>
					<div>今日收入</div>
				</u-grid-item>
				<u-grid-item  class="grid-item">
					<div >
						<u-count-to bold :startVal="0" :endVal="12"></u-count-to>
					</div>
					<div>今日接单</div>
				</u-grid-item>
				<u-grid-item  class="grid-item">
					<div style="color: red;">
						￥<u-count-to color="red" bold :startVal="0" :endVal="15544"></u-count-to>
					</div>
					<div>本月收入</div>
				</u-grid-item>
				<u-grid-item  class="grid-item">
					<div >
						<u-count-to bold :startVal="0" :endVal="304"></u-count-to>
					</div>
					<div>本月接单</div>
				</u-grid-item>
			</u-grid>
		</div>
		
		<div style="background-color: #FFFFFF; margin: 24rpx;">
			<u-cell-group :border="false">
				<u-cell title="个人中心" :isLink="true" ></u-cell>
				<u-cell title="使用帮助" :isLink="true" ></u-cell>
				
				<u-cell title="设置" :isLink="true" ></u-cell>
				<u-cell title="关于我们" :isLink="true" ></u-cell>
				
				<u-cell title="返回用户端" :isLink="true" @click="toIndex()"></u-cell>
			</u-cell-group>
		</div>
		
		
		<PageFooter />
		<!-- 底部tabbar -->
		<AdminTabbar active="my"/>
	</view>
</template>

<script>
	// 底部tabbar
	import AdminTabbar from '@/admin/components/layout/AdminTabbar.vue';
	import {mapState} from 'vuex';
	
	export default {
		components: {
			AdminTabbar
		},
		data() {
			return {
				
			}
		},
		computed: {
			...mapState('user', {
				userInfo: 'userInfo',
			}),
		},
		methods: {
			// 前往登录
			toLogin(){
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			// 打开用户端
			toIndex(){
				uni.redirectTo({
					url: '/pages/index/index'
				})
			},
		}
	}
</script>

<style scoped>
	.grid-item{
		padding: 24rpx 0;
	}
</style>
